@use '../../../sass/mixins/outline' as *;

.input {
  @include outline;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  padding: 0.25em 0.375em;
  border: 1px solid var(--ps-ui-border);
  width: 100%;

  &[type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }
}

.light {
  background: var(--ps-immutable-off-white);
  color: var(--ps-immutable-placeholder-text);
}

.wrapper {
  margin-bottom: 8px;

  /* so that each has its own line */
  label,
  input {
    display: block;
  }
}
